<template>
    <div >
        <div class="h-40px left-0px top-0px w-100% text-center line-height-40px c-#fff text-22px font-350 mt-20px mb-18px">数据处理地</div>
        <div class="flex justify-center mb-3px">
          <n-input v-model:value="pattern" clearable placeholder="搜索" autosize style="min-width: 90%;" />
<!--        <n-switch v-model:value="showIrrelevantNodes">-->
<!--            <template #checked>-->
<!--                展示搜索无关的节点-->
<!--            </template>-->
<!--            <template #unchecked>-->
<!--                隐藏搜索无关的节点-->
<!--            </template>-->
<!--        </n-switch>-->
        </div>
        <n-tree
            :show-irrelevant-nodes="showIrrelevantNodes"
            :pattern="pattern"
            :data="data"
            block-node
            expand-on-click
            placeholder="输入行政区划搜索"
            :cancelable="false"
            :default-selected-keys="defaultSelectedKeys"
            :default-expanded-keys="defaultExpandedKeys"
            :on-update:selected-keys="updateSelectedKeys"
            virtual-scroll
            class="h-750px w-280px mx-10px"
        />
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref} from "vue";
import { getAreaTree } from '@/api'

// const data = [
//     {
//         label: "呼和浩特市",
//         key: "1501",
//         groupType: 2,
//         children: [
//             {
//                 label: "新城区",
//                 key: "150102",
//                 groupType: 3,
//                 children: [
//                     { label: "海拉尔街道",
//                         key: "150102001" ,
//                         groupType: 4,
//                         children: [
//                             {
//                                 label: '军区社区',
//                                 key: '150102001006',
//                                 groupType: 5,
//                             },
//                             {
//                                 label: '公主府社区',
//                                 key: '150102001001',
//                                 groupType: 5,
//                             }
//                         ]
//                     },
//                     {
//                         label: "东河区域服务中心",
//                         key: "150102103",
//                         groupType: 4,
//                         children: [
//                             {
//                                 label: '南苑社区',
//                                 key: '150102103002',
//                                 groupType: 5,
//                             },
//                             {
//                                 label: '东河社区',
//                                 key: '150102103003',
//                                 groupType: 5,
//                             }
//                         ]
//                     }
//                 ]
//             },
//             {
//                 label: "回民区",
//                 key: "150103",
//                 groupType: 3,
//                 children: [
//                     { label: "新华西路街道",
//                         key: "150103001" ,
//                         children: [
//                             {
//                                 label: '医学院社区',
//                                 key: '150103001011'
//                             },
//                             {
//                                 label: '通北社区',
//                                 key: '150103001013'
//                             }
//                         ]
//                     },
//                     {
//                         label: "中山西路街道",
//                         key: "150103002",
//                         children: [
//                             {
//                                 label: '公园东社区',
//                                 key: '150103002009'
//                             },
//                             {
//                                 label: '吕祖庙社区',
//                                 key: '150103002016'
//                             }
//                         ]
//                     }
//                 ]
//             },
//         ]
//     },
// ];
export default defineComponent({

    setup(props, {emit}) {

        const pattern = ref("");
        const showIrrelevantNodes = ref(false);
        // 默认展开项
        const defaultExpandedKeys = ref(['1501']);
        // 默认选中节点
        const defaultSelectedKeys = ref(['1501']);

        // tree
        const data = ref([]);


        const updateSelectedKeys = (_keys, _option, meta) => {
            // console.log('--->updateSelectedKeys', _keys, _option, meta)
            if (!meta.node) {
                return;
            }

            switch (meta.action) {
                case 'select':
                    // console.log('----> keys', _keys[0], _option[0].groupType)
                    break;
                default:
                    break;
            }
            emit('selectKey', _keys[0], _option[0].groupType)

        }

        onMounted(async () => {
            const res = await getAreaTree()
            // console.log('----------->', res)
            if (res.code == 1) {
                data.value.push(res.data);
            }
        })

        return {
            data,
            pattern,
            showIrrelevantNodes,
            defaultSelectedKeys,
            updateSelectedKeys,
            defaultExpandedKeys,
        }
    }
})
</script>

<style lang="scss" scoped>

</style>
